<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <table cellspacing="0" cellpadding="0" class="detailTable">
        <tbody>
          <tr>
            <td class="title">承保机构名称</td>
            <td>{{ detailData.name || '--' }}</td>
            <td class="title">所属保函类型</td>
            <td>{{ detailData.typeDesc || '--' }}</td>
          </tr>
          <tr>
            <td class="title">投保资料</td>
            <td colspan="4">
              <span v-for="(item, index) of detailData.insItemVOS" :key="index"
                >资料{{ index + 1 }} ：{{ item.name }}
                <br />
              </span>
            </td>
          </tr>
          <tr>
            <td class="title">简介</td>
            <td colspan="4">{{ detailData.description || '--' }}</td>
          </tr>
          <tr>
            <td class="title">启用/禁用状态</td>
            <td>
              <span class="redColor" v-if="detailData.status == 'OFF'"
                >禁用</span
              >
              <span class="successColor" v-else-if="detailData.status == 'ON'"
                >启用</span
              >
              <span v-else>--</span>
            </td>
            <td class="title">保险业务员账号</td>
            <td colspan="1">
              <span
                v-for="(item, index) of detailData.insInsurersUserVOS"
                :key="index"
                >{{ item.nickname }}
                <span v-show="index != detailData.insInsurersUserVOS.length - 1"
                  >、</span
                >
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'guaranteeConfigDetail',
  data() {
    return {
      titleText: '返回列表',
      back: true,
      detailData: {
        insItemVOS: [],
        insInsurersUserVOS: [],
      },
    }
  },

  created() {
    this.getDetail()
  },
  methods: {
    //获取详情
    getDetail() {
      this.axios({
        method: 'post',
        url: 'api-d/insconfiginsurers/detail',
        data: { id: this.$route.query.id },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.detailData = response.data.result
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {})
    },

    goBack() {
      this.$router.push('/home/newInsurance/insuranceConfig')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/newInsurance/insuranceConfig',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>
<style scoped lang="less">
.mainCon {
  padding: 16px 24px;
}
</style>
